<template>
  <div class="settle-account-container">
    <div class="top-tab">
      <a-tabs v-model:active-key="curPage" @change="tabChange" size="mini">
        <a-tab-pane v-for="item in tabList" :key="item.key">
          <template #title>
            <span>{{ item.label }}</span>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="table-bottom table-gl-w">
      <div class="search-w">
        <FilterTable :filterItem="filterItem" :max-num="5" :isReset="true" @search="searchByVal" />
      </div>
      <div class="table-gl-con">
        <TableWrap style="flex: 1" @refresh="getList">
          <template #headerLeft>
            <a-space v-if="curPage == '1'">
              <a-button class="gray-outline" @click="pass('mul')">通过</a-button>
              <a-button class="gray-outline" @click="reject('mul')">驳回</a-button>
            </a-space>
          </template>
          <template #tableBody>
            <a-table size="mini" :bordered="{ headerCell: true, wrapper: true }" v-model:selected-keys="ids" row-key="id" :row-selection="{ type: 'checkbox', showCheckedAll: true, width: 40, onlyCurrent: false }" class="table-two-line" @sorter-change="sortChange" :data="tableList" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
              <template #columns>
                <a-table-column title="序号" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
                <a-table-column title="提现申请人" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
                <a-table-column title="账号余额" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
                <a-table-column title="提交时间" #cell="{ record }" :sortable="sortable" data-index="allAmount" :width="130">字段未对接</a-table-column>
                <a-table-column title="提现金额" #cell="{ record }" :sortable="sortable" data-index="allAmount" :width="130">字段未对接</a-table-column>
                <a-table-column title="收款账号" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>

                <a-table-column v-if="['2', '3', '4'].includes(curPage)" title="审批人" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
                <a-table-column v-if="['2', '3', '4'].includes(curPage)" title="审批时间" #cell="{ record }" :sortable="sortable" data-index="allAmount" :width="130">字段未对接</a-table-column>

                <a-table-column v-if="['3'].includes(curPage)" title="转账人" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
                <a-table-column v-if="['3'].includes(curPage)" title="转账日期" #cell="{ record }" :width="130">字段未对接</a-table-column>
                <a-table-column v-if="['3'].includes(curPage)" title="附件" #cell="{ record }" :width="130">字段未对接</a-table-column>

                <a-table-column title="单据号" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
                <a-table-column title="操作" #cell="{ record }" :width="60" align="center" fixed="right" v-if="curPage == '1'">
                  <a-space>
                    <a-button type="text" @click="pass('single', record)">通过</a-button>
                    <a-button type="text" @click="reject('single', record)">驳回</a-button>
                  </a-space>
                </a-table-column>
              </template>
            </a-table>
          </template>
        </TableWrap>
        <div class="pagination-footer">
          <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
        </div>
      </div>
    </div>
  </div>
  <a-modal v-model:visible="setSettleModal" title-align="start" title="提现审批-驳回" :width="500">
    <div class="mb10">
      <a-textarea placeholder="请填写驳回理由" v-model="rejectReason" :rows="4"></a-textarea>
    </div>

    <template #footer>
      <a-space>
        <a-button size="small" class="gray-outline" @click="setSettleModal = false">取消</a-button>
        <a-button size="small" type="primary">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { findTaskPage, delTask, revokeTask, countTaskStatus, statTaskFromLocation } from '@/api/task'
  import { Message, Modal, TableSortable } from '@arco-design/web-vue'
  import { getOrganizesUser } from '@/api/system'
  import useUserStore from '@/store/modules/user'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import _ from 'lodash-es'

  const sortable: TableSortable = { sortDirections: ['ascend', 'descend'], sorter: true }

  const typeMap = {
    NEW_PRODUCT_PICTURE: '新品套图',
    FIX_PICTURE: '以图修图',
    SHOOT_VIDEO: '拍摄视频',
    POSTER_SHOP_DESIGN: '海报设计',
    CHANGE_DIAMOND_COLOR: '换钻调色',
    HAND_DRAWN_DESIGN: '手绘设计',
  }

  const curPage = ref('1')
  const rejectReason = ref('')
  const tabList = ref([
    { label: '待审批', key: '1' },
    { label: '待转账', key: '2' },
    { label: '完成转账', key: '3' },
    { label: '已驳回', key: '4' },
  ])
  const searchValue: any = ref({})
  const info: any = ref({})
  const tableList = ref([])
  const ids = ref<Array<string>>([])
  const loading = ref(false)
  const setSettleModal = ref(false)
  const pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })
  const userInfo = useUserStore()
  const filterItem: any = ref([
    {
      type: 'input_search',
      key: 'employerName',
      keyWidth: '100',
      value: ref(),
      placeholder: '提现申请人',
      width: 160,
    },
    {
      type: 'input_search',
      key: 'employerName',
      keyWidth: '100',
      value: ref(),
      placeholder: '单据号',
      width: 160,
    },

    {
      key: 'price',
      label: '提现金额',
      value: ref([]),
      type: 'num_range',
      width: '80',
      optionField: {
        //最小值和最大值的转换
        min: 'priceMin',
        max: 'priceMax',
      },
    },

    {
      type: 'keyword_date_range_custom',
      key: 'gmtCreate',
      keyItems: [
        { label: '创建时间', value: 'gmtCreate' },
        { label: '创建时间', value: 'gmtWrite' },
      ],
      keyWidth: '130',
      label: '创建时间',
      value: ref(),
      width: 240,
    },
  ])

  const searchByVal = (info: any) => {
    searchValue.value = _.cloneDeep(info)
    getList()
  }
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }

  const getList = async () => {
    const params = {
      ...searchValue.value,
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }
    loading.value = true
    const res: any = await findTaskPage(params)
    if (res) {
      tableList.value = res?.data?.records
      pageNation.value.total = res?.data?.total
    }
    loading.value = false
  }

  const tabChange = () => {
    pageNation.value.pageNum = 1
    getList()
  }

  const pass = async (isMul: string, data: any) => {
    if (isMul == 'mul' && !ids.value[0]) return Message.error('请选择要通过的数据')
    Modal.info({
      title: '提现审批-通过',
      content: '请再次确认是否审批通过',
      titleAlign: 'start',
      cancelText: '取消',
      hideCancel: false,
      onOk: async () => {
        // const params = {
        //   idList: ids.value,
        // }
        // const res: any = await cancelTakeTask(params)
        // if (res) {
        //   Message.success('取消接单成功')
        //   ids.value = []
        //   getList()
        // }
      },
    })
  }

  const reject = (isMul: string, data: any) => {
    if (isMul == 'mul' && !ids.value[0]) return Message.error('请选择要驳回的数据')
    if (isMul != 'mul') info.value = data
    setSettleModal.value = true
  }

  onMounted(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  .settle-account-container {
    // height: calc(100vh - @menuHeight);
    .top-tab {
      background-color: white;
    }
    .table-bottom {
      height: calc(100vh - @menuAndTabHeight);
    }
  }

  .label {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
</style>
